<template>
	<div class="body">
		<div class="title">
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;">
				<span style="width: 100%;padding-left: 0.8vw">
					{{time}}
				</span>
			</div>
			<div style="width: 50vw;color: #fff;text-align: center;padding-top: 1vh;">
				<h2>物联设备数据统计（近一个月）</h2>
			</div>
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;;text-align: right">
				<span style="width: 100%;padding-right: 0.8vw">
					{{week}}
				</span>
			</div>
		</div>
		<div class="content">
			<div style="width: 25vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-bars" style="padding-right: 5px"></i>设备统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 7vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div style="width: 100%;display: flex;padding:13px 15px">
						<p style="font-size: 16px;color: #fff;font-weight: bold;padding-top: 0.7rem;padding-left: 1rem">
							设备总量
							<p style="font-size: 22px;color: #FF9999;font-weight: bold;padding-left: 2px">{{allCount}}</p>
						</p>
						<p style="font-size: 16px;color: #fff;font-weight: bold;padding-top: 0.7rem;padding-left: 1rem">
							在线数量
							<p style="font-size: 22px;color: #FF9999;font-weight: bold;padding-left: 2px">{{allOnlineCount}}</p>
						</p>
						<p style="font-size: 16px;color: #fff;font-weight: bold;padding-top: 0.7rem;padding-left: 1rem">
							离线数量
							<p style="font-size: 22px;color: #FF9999;font-weight: bold;padding-left: 2px">{{allOfflineCount}}</p>
						</p>
					</div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-map" style="padding-right: 5px"></i>分区设备&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 39vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="distributionDeviceChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-server" style="padding-right: 5px"></i>设备分类&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 38vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="categoryDataChart" style="height: 100%;padding-right: 1.6rem"></div>
				</div>
			</div>
			<div style="width: 40vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-clock-o" style="padding-right: 5px"></i>在线时长&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43.5vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="onlineTimeChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-shield" style="padding-right: 5px"></i>能耗统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43.5vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="powerUsedChart" style="height: 100%;padding-left: 10px"></div>
				</div>
			</div>
			<div style="width: 30vw;padding:0 0.8vw">
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-retweet" style="padding-right: 5px"></i>借还统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43.5vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="circulateBorrowChart" style="height: 100%;padding-left: 10px"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;<i class="fa fa-cogs" style="padding-right: 5px"></i>使用统计&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43.5vh">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<div id="deviceUsedChart" style="height: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')
	require('echarts/lib/component/dataZoom')
	require('echarts/lib/component/toolbox')
	require('echarts/lib/component/markPoint')

	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	var myChart = null;
	var myChart1 = null;
	var date = new Date();
	export default {
		components: {

		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			};
			Array.prototype.sum = function() {
				var result = 0;
				for(var i = 0; i < this.length; i++) {
					result += this[i];
				}
				return result;
			};
			return {
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				time: '',
				week: '',
				allCount: 0,
				allOnlineCount: 0,
				allOfflineCount: 0,
				deviceUsedIndex: 1,
				deviceUsedPageCount: 0,
				circulateIndex: 1,
				circulatePageCount: 0,
				districtIndex: 1,
				districtPageCount: 0,
				powerIndex: 1,
				powerPageCount: 0,
				onlineIndex: 1,
				onlinePageCount: 0,
				timer: null,
				categoryTimeOut: null,
				districtTimeOut: null,
				onlineTimeOut: null,
				deviceUsedTimeOut: null,
				circulateTimeOut: null,
				powerTimeOut: null
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			showTime() {
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var dateArr = ["日", "一", '二', '三', '四', '五', '六'];
				var day = myDate.getDay();
				var hours = myDate.getHours();
				var minutes = this.formatTime(myDate.getMinutes());
				var seconds = this.formatTime(myDate.getSeconds());
				this.time = " " + year + "年" + month + "月" + date + "日";
				this.week = "星期" + dateArr[day] + "\n" + hours + ":" + minutes + ":" + seconds;
				this.timer = null;
				this.timer = setTimeout(this.showTime, 1000);
			},
			//格式化时间：分秒。
			formatTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			},
			//获取设备种类数据
			getCategoryDatas() {
				HttpServer.httpGet.call(this, '/Api/Statistics/Device/AllCategoryCount?uid=' + GloabFun.getUid(), function(response) {}, function(response) {
					var lengendDatas = [];
					this.allCount = 0;
					this.allOnlineCount = 0;
					this.allOfflineCount = 0;
					var that = this;
					response.data.info.forEach(function(item) {
						lengendDatas.push(item.categoryname);
						item.name = item.categoryname;
						item.value = item.offlinecount + item.onlinecount;
						that.allCount = that.allCount + item.allcount;
						that.allOnlineCount = that.allOnlineCount + item.onlinecount;
						that.allOfflineCount = that.allOfflineCount + item.offlinecount;
					})
					myChart = echarts.init(document.getElementById('categoryDataChart'));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							left: 'top',
						},
						series: [{
							type: 'pie',
							radius: '55%',
							roseType: 'area',
							label: {
								normal: {
									formatter: '{b}\n{c}({d}%)',
									textStyle: {
										color: '#fff',
										fontSize: '13'
									}
								}
							},
							labelLine: {
								normal: {
									lineStyle: {
										color: '#fff'
									},
								}
							},
							data: response.data.info
						}]
					})
				})
				this.categoryTimeOut = null;
				this.categoryTimeOut = setTimeout(this.getCategoryDatas, 10000);
			},
			sliceArray(array, size) {
				var result = [];
				for(var x = 0; x < Math.ceil(array.length / size); x++) {
					var start = x * size;
					var end = start + size;
					result.push(array.slice(start, end));
				}
				return result;
			},

			//获取分区数据
			getDistrictDeviceDatas() {
				if(this.districtIndex < this.districtPageCount) {
					this.districtIndex++;
				} else {
					this.districtIndex = 1;
				}
				HttpServer.httpGet.call(this, '/Api/Statistics/Device/Distribution?uid=' + GloabFun.getUid() + '&Index=' + this.districtIndex + '&PageSize=3', function(response) {}, function(response) {
					this.districtPageCount = response.data.pagecount;
					var seriesDatas = [],
						xAxisDatas = [],
						onlineDatas = [],
						offlineDatas = [];
					response.data.info.forEach(function(item) {
						seriesDatas.push(item.onlinecount + item.offlinecount);
						xAxisDatas.push(item.districtName);
						onlineDatas.push(item.onlinecount);
						offlineDatas.push(item.offlinecount);
					})
					myChart1 = echarts.init(document.getElementById("distributionDeviceChart"));
					myChart1.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#006699', '#4cabce', '#e5323e'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							data: ['总量', '在线', '离线'],
							textStyle: {
								color: '#fff'
							}
						},
						calculable: true,
						xAxis: [{
							type: 'category',
							axisTick: {
								show: false
							},
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}],
						series: [{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '总量',
								type: 'bar',
								data: seriesDatas
							},
							{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '在线',
								type: 'bar',
								barGap: 0,
								data: onlineDatas
							},
							{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '离线',
								type: 'bar',
								data: offlineDatas
							}
						]
					});
				})
				this.districtTimeOut = null;
				this.districtTimeOut = setTimeout(this.getDistrictDeviceDatas, 20000);
			},

			//设备在线时长
			getOnlineTimeDatas() {
				var date1 = new Date();
				this.startTime = new Date((date1.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00';
				this.endTime = date1.format('yyyy-MM-dd') + ' 23:59:59';
				if(this.onlineIndex < this.circulatePageCount) {
					this.onlineIndex++;
				} else {
					this.onlineIndex = 1;
				}
				var param = {
					category: [],
					timeformat: "D",
					begin: this.startTime,
					end: this.endTime,
					index: this.onlineIndex,
					pagesize: 1,
					order: 1
				}
				HttpServer.httpPost.call(this, '/Api/Statistics/Device/OnlineTime', param, function(response) {}, function(response) {
					this.onlinePageCount = response.data.onlineIndex;
					myChart = echarts.init(document.getElementById('onlineTimeChart'));
					myChart.setOption({
						title: {
							left: 'center',
							text: response.data.info[0].name,
							subtext: '总在线时长:' + Math.round(response.data.info[0].hoursed.sum() * 100) / 100 + 'h',
							textStyle: {
								color: '#fff',
								fontWeight: 'bold',
								fontSize: 18
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c}h"
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: response.data.info[0].time,
							axisLabel: {
								show: true,
								// rotate: 45,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff'
								}
							},
						},
						yAxis: {
							type: 'value',
							name: '小时(h)',
							axisLabel: {
								show: true,
								// rotate: 45,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff'
								}
							},
						},
						series: [{
							data: response.data.info[0].hoursed,
							type: 'line',
							smooth: true,
							markPoint: {
								data: [{
										type: 'max',
										name: '最大值'
									},
									{
										type: 'min',
										name: '最小值'
									}
								]
							}
						}]
					});
				})
				this.onlineTimeOut = null;
				this.onlineTimeOut = setTimeout(this.getOnlineTimeDatas, 12000);
			},

			//获取设备使用统计
			getDeviceUsedDatas() {
				var date1 = new Date();
				this.startTime = new Date((date1.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00';
				this.endTime = date1.format('yyyy-MM-dd') + ' 23:59:59';
				if(this.deviceUsedIndex < this.deviceUsedPageCount) {
					this.deviceUsedIndex++;
				} else {
					this.deviceUsedIndex = 1;
				}
				var param = {
					category: ['WeiTu', 'Self_ServiceMachine'],
					index: this.deviceUsedIndex,
					pagesize: 3,
					order: 0,
					begin: this.startTime,
					end: this.endTime
				}
				HttpServer.httpPost.call(this, '/Api/Statistics/WeiTu/DeviceUsage', param, function(response) {}, function(response) {
					this.deviceUsedPageCount = response.data.pagecount;
					var xAxisDatas = [],
						onlineTimeDatas = [],
						loginDatas = [],
						borrowDatas = [],
						returnDatas = [];
					response.data.info.forEach(function(item) {
						xAxisDatas.push(item.Name);
						onlineTimeDatas.push((Math.round(item.olinetime) * 10) / 10);
						loginDatas.push(item.logincount);
						borrowDatas.push(item.borrowcount);
						returnDatas.push(item.returncount);
					})
					myChart = echarts.init(document.getElementById('deviceUsedChart'));
					myChart.setOption({
						// animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#66CC33', '#4cabce', '#e5323e', '#8A2BE2'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							data: ['在线时长', '登录次数', '借阅次数', '还书次数'],
							textStyle: {
								color: '#fff'
							}
						},
						calculable: true,
						xAxis: [{
							type: 'category',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
							axisTick: {
								show: false
							},
							data: xAxisDatas
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}],
						series: [{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '在线时长',
								type: 'bar',
								barGap: 0,
								data: onlineTimeDatas
							},
							{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '登录次数',
								type: 'bar',
								data: loginDatas
							},
							{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '借阅次数',
								type: 'bar',
								data: borrowDatas
							},
							{
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'top',
											formatter: '{c}',
											textStyle: {
												fontWeight: 'bolder',
												fontSize: 14
											}
										}
									}
								},
								name: '还书次数',
								type: 'bar',
								data: returnDatas
							}
						]
					});
				});
				this.deviceUsedTimeOut = null;
				this.deviceUsedTimeOut = setTimeout(this.getDeviceUsedDatas, 15000);
			},

			//获取设备借还记录
			getCirculateRecordDatas() {
				var date1 = new Date();
				this.startTime = new Date((date1.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00';
				this.endTime = date1.format('yyyy-MM-dd') + ' 23:59:59';
				if(this.circulateIndex < this.circulatePageCount) {
					this.circulateIndex++;
				} else {
					this.circulateIndex = 1;
				}
				var param = {
					category: ['WeiTu', 'Self_ServiceMachine'],
					timeformat: "D",
					begin: this.startTime,
					end: this.endTime,
					index: this.circulateIndex,
					pagesize: 1,
				}
				HttpServer.httpPost.call(this, '/Api/Statistics/WeiTu/CirculateRecord', param, function(response) {}, function(response) {
					this.circulatePageCount = response.data.pagecount;
					myChart = echarts.init(document.getElementById('circulateBorrowChart'));
					myChart.setOption({
						// animation: false,
						color: ['#4cabce', '#e5323e'],
						legend: {
							data: ['借书次数', '还书次数'],
							y: 'bottom',
							textStyle: {
								color: '#fff'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c}"
						},
						title: {
							left: 'center',
							text: response.data.info[0].name,
							subtext: '总借阅量:' + response.data.info[0].borrowdata.sum() + '  ' + '总还书量:' + response.data.info[0].returndata.sum(),
							textStyle: {
								color: '#fff',
								fontWeight: 'bold',
								fontSize: 18
							}
						},
						xAxis: {
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							axisLabel: {
								show: true,
								// rotate: 45,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff'
								}
							},
							type: 'category',
							data: response.data.time
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '14'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff'
								}
							}
						},
						series: [{
								name: '借书次数',
								type: 'line',
								smooth: true,
								data: response.data.info[0].borrowdata,
								markPoint: {
									data: [{
											type: 'max',
											name: '最大值'
										},
										{
											type: 'min',
											name: '最小值'
										}
									]
								}
							},
							{
								name: '还书次数',
								type: 'line',
								smooth: true,
								data: response.data.info[0].returndata,
								markPoint: {
									data: [{
											type: 'max',
											name: '最大值'
										},
										{
											type: 'min',
											name: '最小值'
										}
									]
								}
							}
						]
					})
				})
				this.circulateTimeOut = null;
				this.circulateTimeOut = setTimeout(this.getCirculateRecordDatas, 10000);
			},

			//获取设备耗电数据
			getPowerUsedDatas() {
				var date1 = new Date();
				this.startTime = new Date((date1.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00';
				this.endTime = date1.format('yyyy-MM-dd') + ' 23:59:59';
				if(this.powerIndex < this.powerPageCount) {
					this.powerIndex++;
				} else {
					this.powerIndex = 1;
				}
				var param = {
					begin: this.startTime,
					end: this.endTime,
					type: "D",
					index: this.powerIndex,
					pagesize: 5
				}
				HttpServer.httpPost.call(this, '/Api/Statistics/Device/PduPower', param, function(response) {}, function(response) {
					this.powerPageCount = response.data.pagecount;
					var time = [],
						pduDatas = [];
					for(var i = 0; i < response.data.result.length; i++) {
						if(response.data.result[i].info.length > 0) {
							time = response.data.result[i].info[0].time;
							response.data.result[i].count = 0;
							for(var j = 0; j < response.data.result[i].info.length; j++) {
								response.data.result[i].info[j].Name = response.data.result[i].Name;
								pduDatas.push(response.data.result[i].info[j]);
								response.data.result[i].count = Math.round((response.data.result[i].count + response.data.result[i].info[j].consumption.sum()) * 100) / 100;
							}
						} else {
							response.data.result[i].count = 0;
						}
					}
					var yAxisDatas = [],
						seriesDatas = [];
					response.data.result.forEach(function(item) {
						yAxisDatas.push(item.Name);
						seriesDatas.push(item.count);
					})
					//展示中控设备的总耗电量
					myChart = echarts.init(document.getElementById("powerUsedChart"));
					myChart.setOption({
						// animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: yAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						yAxis: {
							type: 'value',
							name: '度(kw/h)',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
											'#000099', '#006633', '#009999', '#660033', '#660099'
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontWeight: 'bolder',
											fontSize: 14
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					});
				})
				this.powerTimeOut = setTimeout(this.getPowerUsedDatas, 18000);
			}

		},
		created() {
			this.showTime();
			this.getCategoryDatas();
			this.getDistrictDeviceDatas();
			this.getOnlineTimeDatas();
			this.getDeviceUsedDatas();
			this.getCirculateRecordDatas();
			this.getPowerUsedDatas();
		},
		beforeDestroy() {
			clearTimeout(this.timer);
			clearTimeout(this.categoryTimeOut);
			clearTimeout(this.districtTimeOut);
			clearTimeout(this.onlineTimeOut);
			clearTimeout(this.deviceUsedTimeOut);
			clearTimeout(this.circulateTimeOut);
			clearTimeout(this.powerTimeOut);
		},
	}
</script>
<style scoped>
	@import '../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.body {
		height: 100%;
		background: url('../../../assets/images/dataStatistic/bg.jpg') no-repeat;
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;
		.title {
			height: 6vh;
			width: 100%;
			display: flex;
			background: rgba(135, 158, 255, 0.4);
			/* 一些不支持背景渐变的浏览器 */
			background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(135, 158, 255, 0.3)), to(#090edc));
		}
		.content {
			width: 100%;
			margin: 0;
			display: flex;
			.content-title {
				width: aotu;
				height: 20px;
				color: #fff;
				font-size: 15px;
				font-weight: bold;
				margin-left: 32px;
				background-color: #090edc;
				border-radius: 2px;
				display: inline;
				font-family: "Microsoft Yahei";
			}
			.chartRegion {
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				position: relative;
				width: 100%;
				border: 0.1rem solid #879eff;
			}
			.chartRegion span:nth-child(1) {
				position: absolute;
				left: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0 0 0.3rem;
			}
			.chartRegion span:nth-child(2) {
				position: absolute;
				right: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0.3rem 0 0;
			}
			.chartRegion span:nth-child(3) {
				position: absolute;
				right: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0.3rem 0.3rem 0;
			}
			.chartRegion span:nth-child(4) {
				position: absolute;
				left: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0 0.3rem 0.3rem;
			}
		}
	}
</style>